<template>
  <div class="height100 boxFlex">
    <div style="width: 400px;" class="height100">
      <el-card class="height100">
        <template #header>
          <div class="boxFlex">
            <span>部门信息</span>
            <el-dropdown trigger="click" class="info">
              <el-icon class="pointer" title="操作">
                <MoreFilled/>
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="addDept">新增部门</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <el-tree :data="departmentList" :props="customProps" @node-click="handleNodeClick"
                 :expand-on-click-node="false" :default-expand-all="true" ref="treeRef" @node-contextmenu="contextmenu">
          <template v-slot:default="{ node , data }">
            <div class="boxFlex">
              <span :title="node.label" class="textDot" style="width: 200px;">{{ node.label }}</span>
              <el-dropdown trigger="click" class="info">
                <el-icon class="pointer" title="操作">
                  <MoreFilled/>
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="addSonDept(data)">新增菜单</el-dropdown-item>
                    <el-dropdown-item @click="editDept(data)">编辑菜单</el-dropdown-item>
                    <el-dropdown-item @click="deleteDepartmentById(data)">删除菜单</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </el-card>
    </div>
    <div style="width: calc(100% - 410px);margin-left: 10px;" class="height100">
      <el-card class="height100">
        <template #header>
          <div class="boxFlex">
            <span>成员列表</span>
            <el-dropdown trigger="click" class="info">
              <el-icon class="pointer" title="操作">
                <MoreFilled/>
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="showSelectUserList=true">添加用户</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <el-form :inline="true">
          <el-form-item label="用户名或用户姓名">
            <el-input v-model="request.departmentName" placeholder="请输入用户名或用户姓名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :highlight-current="true" max-height="400"
                  :data="userList" border>
          <el-table-column prop="username" label="用户名"/>
          <el-table-column prop="trueName" label="用户姓名"/>
          <el-table-column prop="phone" label="手机号"/>
          <el-table-column prop="email" label="邮箱"/>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="danger" size="small" @click="deleteUserAsync(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background :total="userListTotal"
                       style="margin-top: 20px"
                       layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"></el-pagination>
      </el-card>
    </div>
  </div>
  <department-info v-if="showDept" v-model:visible="showDept" :title="title"
                   @save="getAllDepartmentAsync" :type="type" :info="info" :parentId="parentId"></department-info>
  <user-list v-model:visible="showSelectUserList" v-if="showSelectUserList"
             :dept-id="queryUserInfo.deptId" @save="selectUserListByDeptIdAsync"></user-list>
  <context-menu v-if="state.showContextMenu" v-model="state.showContextMenu" :client-x="state.clientX"
                :client-y="state.clientY"></context-menu>
</template>

<script>
import { post } from '@/utils/httpRequest'
import {
  selectAllDepartmentUrl,
  selectUserListByDeptIdUrl,
  deleteDepartmentByIdUrl,
  deleteUserDepartmentUrl
} from '@/api/api'
import { onBeforeMount, ref } from 'vue'
import DepartmentInfo from '@/views/departmentManage/departmentInfo'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserList from '@/views/departmentManage/userList/userList'
import ContextMenu from '@/views/departmentManage/components/contextMenu'

export default {
  name: 'departmentManage',
  components: {
    ContextMenu,
    UserList,
    DepartmentInfo
  },
  setup () {
    const request = ref({
      departmentName: null
    })
    const state = ref({
      showContextMenu: false,
      clientX: 0,
      clientY: 0
    })
    const showSelectUserList = ref(false)
    const contextmenu = (e, data) => {
      console.log(e, data)
      state.value.clientX = e.clientX
      state.value.clientY = e.clientY
      state.value.showContextMenu = true
    }
    const deleteUserAsync = async (row) => {
      ElMessageBox.confirm('确定移除该用户？', '移除用户提示', {
        type: 'warning'
      }).then(async () => {
        const result = await post(deleteUserDepartmentUrl, {
          userId: row.id,
          departmentId: queryUserInfo.value.deptId
        })
        if (result.code === 200) {
          await selectUserListByDeptIdAsync()
        }
      })
    }
    const customProps = {
      label: 'departmentName'
    }
    const deleteDepartmentById = (item) => {
      ElMessageBox.confirm('确定删除该部门？', '删除部门提示', {
        type: 'warning'
      }).then(async () => {
        await deleteDepartmentByIdAsync(item.id)
      })
    }
    const deleteDepartmentByIdAsync = async (id) => {
      const result = await post(deleteDepartmentByIdUrl, { id: id })
      if (result.code === 200) {
        ElMessage.success('删除部门成功')
        await getAllDepartmentAsync()
      }
    }
    const handleNodeClick = (node) => {
      queryUserInfo.value.deptId = node.id
      queryUserInfo.value.pageNum = 1
      queryUserInfo.value.pageSize = 10
      queryUserInfo.value.name = null
      selectUserListByDeptIdAsync()
    }
    const selectUserListByDeptIdAsync = async () => {
      const result = await post(selectUserListByDeptIdUrl, queryUserInfo.value)
      if (result.code === 200) {
        userList.value = result.data.records
        userListTotal.value = result.data.total
      }
    }
    const handleSizeChange = (value) => {
      queryUserInfo.value.pageSize = value
      selectUserListByDeptIdAsync()
    }
    const handleCurrentChange = (value) => {
      queryUserInfo.value.pageNum = value
      selectUserListByDeptIdAsync()
    }
    const queryUserInfo = ref({
      deptId: null,
      name: null,
      pageNum: 1,
      pageSize: 10
    })
    const info = ref({})
    const parentId = ref(0)
    const type = ref(0)
    const addDept = () => {
      type.value = 0
      title.value = '新增部门'
      showDept.value = true
    }
    const editDept = (data) => {
      type.value = 1
      title.value = `编辑【${data.departmentName}】部门`
      info.value = Object.assign({}, data)
      showDept.value = true
    }
    const addSonDept = (data) => {
      type.value = 4
      title.value = `新增【${data.departmentName}】子部门`
      parentId.value = data.id
      showDept.value = true
    }
    const showDept = ref(false)
    const title = ref('')
    const departmentList = ref([])
    const userList = ref([])
    const userListTotal = ref(0)
    const getAllDepartmentAsync = async () => {
      const result = await post(selectAllDepartmentUrl, {})
      if (result.code === 200) {
        departmentList.value = result.data
        if (departmentList.value.length) {
          queryUserInfo.value.deptId = departmentList.value[0].id
          await selectUserListByDeptIdAsync()
        }
      }
    }
    onBeforeMount(() => {
      getAllDepartmentAsync()
    })
    return {
      state,
      contextmenu,
      customProps,
      deleteUserAsync,
      handleCurrentChange,
      handleSizeChange,
      userListTotal,
      selectUserListByDeptIdAsync,
      showSelectUserList,
      deleteDepartmentById,
      queryUserInfo,
      handleNodeClick,
      userList,
      parentId,
      addSonDept,
      info,
      editDept,
      type,
      getAllDepartmentAsync,
      showDept,
      addDept,
      title,
      departmentList,
      request
    }
  }
}
</script>

<style scoped>

</style>
